<template>
    <view>
        <view class="cu-bar search bg-white">
            <view class="action" @tap="$utils.$page.back()">
                <text class="cuIcon-back"></text>
            </view>
            <view class="search-form round">
                <text class="cuIcon-search"></text>
                <input v-model="search.keywords" type="text" placeholder="搜索服务名称" confirm-type="search"
                    @input="searchList" />
            </view>
        </view>
        <view class="padding-sm">
            <view class="bg-white radius-lg padding-sm margin-bottom-sm" v-for="(item, index) in list" :key="index">
                <view class="flex align-center padding-bottom">
                    <image :src="item.thumb" class="thumb radius-lg" />
                    <view class="flex-sub padding-left">
                        <view class="text-bold padding-bottom-sm">{{ item.title }}</view>
                        <view class="text-sm">
                            <view class="flex align-center">
                                <view>材料费：</view>
                                <view class="flex-sub">{{ item.material_price }}元</view>
                            </view>
                            <view class="flex align-center">
                                <view>服务时长：</view>
                                <view class="flex-sub">{{ item.service_duration }}分钟</view>
                            </view>
                            <view class="flex align-center">
                                <view>加钟：</view>
                                <view class="flex-sub" v-if="item.overtime_state">
                                    <view v-if="item.overtime_separate">
                                        {{ item.overtime_price }}元/{{ item.overtime_duration }}分钟</view>
                                    <view v-else>跟随项目定价</view>
                                </view>
                                <view class="flex-sub" v-else>不可用</view>
                            </view>
                        </view>
                    </view>
                    <view class="text-center themeColor">
                        <view class="text-xl text-red">{{ item.price }}元</view>
                        <view class="text-xxl">
                            {{ ((item.price - item.material_price) * item.technician_commission / 100).toFixed(2) }}元</view>
                        <text class="text-xs">预估收益</text>
                    </view>
                </view>
                <view class="flex justify-end">
                    <button class="cu-btn round sm" @tap="toggleState(item)" v-if="item.state">下架</button>
                    <button class="cu-btn round sm china-btn-bg" @tap="toggleState(item)" v-else>上架</button>
                </view>
            </view>
        </view>
        <u-loadmore :status="pageLoading" @loadmore="getList" />
    </view>
</template>

<script>
import { debounce } from '@/utils/functions';
let debounceGetList;
export default {
    data() {
        return {
            pageLoading: 'loadmore',
            list: [],
            search: {
                page: 1,
                keywords: ''
            }
        };
    },
    onLoad(options) {
        this.getList();
        debounceGetList = debounce(() => { this.getList() }, 300);
    },
    onReachBottom() {
        this.getList();
    },
    methods: {
        getList() {
            if (this.pageLoading === 'loading' || this.pageLoading === 'nomore') return;
            this.pageLoading = 'loading';
            this.$utils.$api.TechnicianService.service(this.search).then(data => {
                this.pageLoading = 'loadmore';
                this.list = [...this.list, ...data.data];
                this.search.page++;
                if (data.current_page >= data.last_page) {
                    this.pageLoading = 'nomore';
                }
            });
        },
        searchList() {
            this.search.page = 1;
            this.list = [];
            this.pageLoading = 'loadmore';
            debounceGetList();
        },
        toggleState(item) {
            this.$utils.$api.TechnicianService.updateState(item.uts_id).then((res) => {
                item.state = res.data.state;
            }).catch((err) => {
                this.$utils.$message.error(err.msg);
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.thumb {
    width: 170rpx;
    height: 130rpx;
}
</style>
